<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
            
            body{
                background-image: url("Eclipse.jpg");
                background-repeat: no-repeat;
                color: red;
                background-attachment: fixed;
            }
            #div{
                border-top: 2px solid #aaaaaa;
                border-right: 1px dotted #0000ff;
                border-bottom: 3px double #ffdddd;
                border-left: 1px solid #000000;
                border-width: 8px; 
                border-style: solid;
                border-right-color: cyan;
                border-left-color: blue;
                border-top-color: green ;
                border-bottom-color: red;
                margin: 25px;
            }
        </style>
    </head>
    <body>
        <div id="div">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ullamcorper sollicitudin urna, nec porta erat vulputate a. Donec eget tortor ligula. Vestibulum gravida adipiscing est quis posuere. Proin dignissim arcu a mi laoreet egestas. Vestibulum at massa non orci luctus volutpat vel posuere nibh. Mauris blandit massa euismod dolor venenatis placerat. Suspendisse in turpis in nisl gravida vehicula id vel lectus. Nulla facilisi. Cras malesuada urna in purus rutrum convallis. In interdum, sem sit amet malesuada eleifend, metus arcu vehicula arcu, nec semper erat ligula cursus lorem. In porttitor dolor at neque ornare pellentesque. Aenean vitae neque sed felis venenatis volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc vulputate est non erat fringilla posuere.
        </div>
        <p>
            Como dijo <cite>Harry S. Truman</cite>,
            <q lang="en-us">The buck stops here.</q>

            Se puede encontrar más información en <cite>[ISO-0000]</cite>.

            Por favor, utilice el siguiente número de referencia en nuestra
            correspondencia futura: <strong>1-234-55</strong>
        </p>
        <h1>Ejemplos con ABBR</h1>
        <p>
            
            <abbr title="World Wide Web">WWW</abbr>
            <abbr lang="fr" title="Soci&eacute;t&eacute; Nationale des Chemins de Fer">
             SNCF
            </abbr>
            <abbr lang="es" title="Do&ntilde;a">Do&ntilde;a</abbr>
            <abbr title="Abbreviation">abbr.</abbr>
        </p>
        <h1>Ejemplos de citas (BLOCKQUOTE)</h1>
        <blockquote cite="http://www.micom.com/tolkien/twotowers.html">
            <p>
                They went in single file, running like hounds on a strong scent,
                and an eager light was in their eyes. Nearly due west the broad
                swath of the marching Orcs tramped its ugly slot; the sweet grass
                of Rohan had been bruised and blackened as they passed.
            </p>
        </blockquote>
        <h1>Ejemplos de citas (Q)</h1>
        <div>
            John said, 
            <q lang="en-us">I saw Lucy at lunch, she told me
                <q lang="en-us">Mary wants you to get some ice cream on your
                way home.</q> 
                I think I will get some at Ben and Jerry's, on
                Gloucester Road.
            </q>
        </div>
        <h1>Ejemplos con subindices y superindices</h1>
        <div>
            H<sub>2</sub>O
            E = mc<sup>2</sup>
            <span lang="fr">M<sup>lle</sup> Dupont</span>
        </div>
        <h1>Ejemplos de parrafos</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce mi erat, tempus non porttitor id, viverra
            eget augue. Praesent interdum facilisis velit in pellentesque. Phasellus ut est a ante varius tincidunt.
            Nullam tristique nisl eget felis tempus in aliquet neque faucibus. Pellentesque habitant morbi tristique
            senectus et netus et malesuada fames ac turpis egestas. Proin feugiat mi eu nisi interdum tristique.
            Etiam pulvinar turpis sed ipsum porttitor sed pharetra mauris semper. Donec pharetra urna aliquet risus
            fermentum a gravida nisi laoreet. Nullam quis nisl dolor, sit amet mattis turpis. Donec interdum venenatis
            tellus non elementum. Sed sagittis rutrum elit, non aliquet lorem fermentum non. Morbi dapibus purus ut
            justo placerat nec dignissim metus congue. Cras semper tincidunt magna in tempor. Maecenas sollicitudin
            congue dui at tempus.
        </p>
        <p>
            Nullam viverra, dui ut placerat porttitor, ligula tellus varius est, ultricies congue enim purus in erat.
            Duis scelerisque malesuada egestas. Vivamus eget malesuada ante. Aliquam sodales imperdiet tellus a
            sollicitudin. Aenean pretium nulla eget metus fermentum consectetur. In at lacinia urna. Proin sit amet
            pulvinar risus.
        </p>
        <p>
            In interdum, mauris at lobortis sollicitudin, massa metus ultrices nisi, a auctor nulla augue sit amet
            justo. Sed feugiat volutpat pharetra. Nam quis tristique massa. Nam porta tortor nec odio porttitor id
            adipiscing ligula cursus. Aliquam id justo est. Pellentesque blandit velit non nisi dignissim quis egestas
            arcu vehicula. Proin magna odio, ullamcorper at lobortis in, laoreet eu metus. Cras eget tortor magna.
            Vivamus leo nunc, mollis at placerat vel, accumsan non libero. Sed ligula odio, vehicula a aliquet eget,
            porttitor at metus. Donec gravida nisl imperdiet eros pharetra et mattis leo pretium. Duis dictum sodales
            odio, eu vestibulum sem tempus eu.
        </p>
        <h1>Ejemplo de texto preformateado (PRE)</h1>
        <pre>
        Te escribo desde un puerto.
        La mar salvaje llora.
Salvaje, y triste,               y solo te escribo abandonado.
Las olas funerales redoblan el vacío.
                Los megáfonos         llaman a través de la niebla.
La pálida corola de la lluvia me envuelve.
        Te escribo desolado.
        </pre>
    </body>
</html>
